<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227" />
  <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150" />
</div>
<script>
    window.onload = () => {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        // 过度缩放图像可能会导致图像模糊或像素化。
        // 您可以通过使用绘图环境的imageSmoothingEnabled属性来控制是否在缩放图像时使用平滑算法。默认值为true，即启用平滑缩放。您也可以像这样禁用此功能：
        ctx.mozImageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.msImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        // 绘制矩形
        const drawImage = () => {
            // Draw slice 剪切
            // drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
            // 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。
            // 前4个是定义图像源本身所在位置和大小，
            // 后4个则是定义裁切的图片在canvas中的显示位置和大小。
            ctx.drawImage(document.getElementById('source'),
                33,71,104,124,21,20,87,104);

            // Draw frame 套上相框
            ctx.drawImage(document.getElementById('frame'),0,0);
        }
        drawImage()
    }

</script>
</body>
</html>
